<template>
  <el-main>
    <el-row>
      <el-col :span="8">
        <span>学员：{{getschoolstudentbyid(studentwork.schoolstudentid ).name}}</span>
      </el-col>
      <el-col :span="8">
        <span>提交时间：{{totime(studentwork.updatedAt )}}</span>
      </el-col>
      <el-col :span="8">
        <span></span>
      </el-col>
    </el-row>
    <div class="row border-top">
      <div class="col-lg-8 border-right padd35">
        <div class="border-bottom">
          <el-tag
            v-for="(v, i) in homework.schoolhomeworkitembank"
            :type="index === i?'primary':'info'"
            :key="`1watchstudenthomework${i}`"
            @click="index = i"
          >{{v.name}}</el-tag>
        </div>
        <br />
        <div class="container">
          <div class="row">
            <div class="col-sm-2 text-center">名称</div>
            <div class="col">{{itembank.name}}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">类型</div>
            <div class="col">{{itembank.type}}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">内容</div>
            <div class="col">
              <div
                style="width: 375px;height:350px;overflow-y: auto;"
                class="border"
                v-html="itembank.text"
              ></div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">答案</div>
            <div
              class="col"
            >{{itembank.data.answer?typeof(itembank.data.answer) === 'object'?itembank.data.answer.join(' '):itembank.data.answer:'' }}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">解析</div>
            <div class="col" v-text="itembank.analysis"></div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">知识点</div>
            <div class="col" v-text="itembank.knowledgepoints"></div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">标签</div>
            <div class="col" v-text="itembank.tags"></div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">学生答案：</div>
            <div class="col" v-text="studentitembank.data?studentitembank.data.answer:''"></div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="col-lg-4 padd35">
        <div class="container">
          <div class="row">
            <div class="col">
              <el-input placeholder="请输入内容" v-model="context" class="input-with-select">
                <el-button slot="append" @click="submit">回复</el-button>
              </el-input>
            </div>
          </div>
          <a-list
            itemLayout="horizontal"
            :dataSource="reply"
            style="height:500px;overflow-y: auto;"
            :locale="{emptyText: '暂无留言'}"
          >
            <a-list-item slot="renderItem" slot-scope="v, index" :key="index">
              <a-list-item-meta :description="v.context">
                <h6
                  slot="title"
                  :class="v.createuser ==='student'?'text-primary':'text-info'"
                  v-text="v.createuser ==='student'?getschoolstudentbyid(v.schoolstudentid).name:getschooluserbyid(v.schooluserid).name"
                ></h6>
                <a-avatar
                  slot="avatar"
                  :src="v.createuser ==='student'?getschoolstudentbyid(v.schoolstudentid).headimg:getschooluserbyid(v.schooluserid).headimg"
                />
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </div>
      </div>
    </div>
    <div class="school-row row" v-if="studentwork.type=='已提交'">
      <div class="col-5">教师点评:</div>
      <div class="col-3 text-right"></div>
      <div class="col-3"></div>
      <div class="col-10">
        <el-input type="textarea" v-model="comment"></el-input>
      </div>
      <div class="col-2">
        <el-button type="primary" size="mini" @click="subm">提交</el-button>
      </div>
    </div>
    <div class="school-row row" v-if="studentwork.type=='已点评'">
      <div class="col-5">教师点评:</div>
      <div class="col-3 text-right"></div>
      <div class="col-3"></div>
      <div class="col-10">{{studentwork.comment}}</div>
    </div>
  </el-main>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asyncchangeschoolstudenthomework,
  asynccreateschoolitembankreply
} from "../../../../plugins/api.js";
import { sortBy } from "underscore";
import { totime } from "../../../utils.js";
export default {
  data() {
    return {
      star: 5,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      comment: null,
      index: 0,
      context: ""
    };
  },
  props: ["ids"],
  name: "watchstudenthomework",
  computed: {
    ...mapGetters([
      "getschoolstudent",
      "getschoolclazz",
      "getschoolhomework",
      "getschooluser",
      "getschoolstudentbyid",
      "getuser",
      "getschooluserbyid"
    ]),
    homework() {
      return this.getschoolhomework.find(v => v.ID == this.ID);
    },
    itembank() {
      return this.homework.schoolhomeworkitembank[this.index];
    },
    ID() {
      return this.$route.params.ID;
    },
    reply() {
      const data= this.homework.schoolhomeworkitembank[this.index]
          .schoolhomeworkitembankreply.filter(v=> v.schoolstudentid == this.ids)
      return sortBy(
        data,
        v => -v.ID
      );
    },
    studentwork() {
      const { schoolstudenthomework } = this.homework;
      return schoolstudenthomework.find(v => v.schoolstudentid == this.ids);
    },
    studentitembank() {
      return (
        this.homework.schoolhomeworkitembank[
          this.index
        ].schoolstudenthomeworkitembank.find(
          v => v.schoolstudentid == this.ids
        ) || {}
      );
    }
  },
  watch: {
    async reply() {
      for (let v of this.reply) {
        if (v.createuser === "student" && !v.state) {
          await asynccreateschoolitembankreply({
            ID: v.ID,
            state: true
          });
        }
      }
    }
  },
  methods: {
    totime,
    async subm() {
      if (!this.comment) {
        this.$message.error("请填写教师点评");
        return;
      }
      try {
        const { ID } = this.studentwork;
        await asyncchangeschoolstudenthomework({
          star: this.star,
          comment: this.comment,
          ID: ID
        });
        this.$message("点评成功");
        await this.$store.dispatch("actionschoolhomework");
        await this.$store.dispatch("actionschoolstudent");
      } catch (err) {
        this.$message.error("点评失败");
      }
    },
    async submit() {
      const { context, homework } = this;
      if (context) {
        if (this.$store.state.state) return;
        this.$store.commit("setstate", true);
        await asynccreateschoolitembankreply({
          context,
          schoolhomeworkitembankid:
            homework.schoolhomeworkitembank[this.index].ID,
          schoolstudentid: this.ids
        });
        this.context = "";
        this.$store.dispatch("actionschoolhomework");
        this.$store.commit("setstate", false);
      }
    }
  },
  beforeDestroy() {
    this.$store.dispatch("actionschoolhomework");
  }
};
</script>

<style lang="scss" scoped>
.block {
  width: 300px;
  height: 300px;
  padding: 5px;
  display: inline-block;
}
.school-row {
  margin-top: 3px;
  border-top: 4px solid #eeeeee;
  padding-top: 12px;
}
.padd35 {
  padding: 35px;
}
</style>